<template>
    <div class="wrapper w" @mousewheel="listen_W">
        <div class="add_c commonClass pointer"
        @click="domC"
        ref="dom">
            Click here 'log hasClass,addClass,log,removeClass'
        </div>

        <div class="add_c commonClass pointer c"
        @click="toolCookie"
        ref="tool">
            Click here 'getCookie,setCookie,removeCookie'
        </div>

        <div class="add_c commonClass pointer"
        @click="toolOther">
            Click here 'getExplore,getOS,deepClone,formatRemainTime,formatNum'
        </div>

        <div class="add_c commonClass pointer c">
            Click here 'throttle,debounce'
        </div>
    </div>
</template>

<script type="ecmascript-6">
    import {hasClass,addClass,log,removeClass} from 'common/js/dom'
    import {getCookie,setCookie,removeCookie,
            getExplore,getOS,deepClone,
            formatRemainTime,formatNum,getLength,
            throttle,debounce} from 'common/js/tools'

    export default {
        methods: {
            domC() {
                let cl   = this.$refs.dom
                let hasC = hasClass(cl,'red')
                hasC ? removeClass(cl,'red') : addClass(cl,'red')
            },
            toolCookie() {
                setCookie('name','sugar','1')
                setTimeout(()=>{
                    let name = getCookie('name')
                    alert(name)
                },1000)
                setTimeout(()=>{
                    removeCookie('name')
                },2000)
            },
            toolOther() {
                let gE      = getExplore()
                let gO      = getOS()
                let endTime = '2018-06-15T13:45:30'
                let num     = '979644416'
                let oV = {
                    'name' : 'sugar',
                    'age'  : '22',
                    'like' : ['basketball','jay']
                }
                let deC = deepClone(oV)

                setTimeout(function f(){
                    let t = formatRemainTime(endTime)
                    let tA = t.split(' ')
                    if (tA[0] === '0天') {
                     return
                    } else {
                        log('格式化现在距endTime的剩余时间:' + t)
                        f()
                    }
                },10000000)
                log('深度克隆:' + JSON.stringify(deC))
                log('获取浏览器版本:' + gE)
                log('获取操作系统:' + gO)
                log('格式化数字:' + formatNum(num,'2','.','.'))
                log('获取字符串长度:' + getLength('asd'))
            },
            listen_W() {
                log('throttle debounce test fail')
            }

        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/mixin.styl'

.commonClass
    height 50px
    line-height 50px
    border-1px(#dcdcdc)
    text-align center
.red
    color red
.c
    color #B22222
</style>
